<template>
  <span
    class="loading z-10"
    :class="{
      'loading-spinner': type === 'spinner',
      'loading-dots': type === 'dots',
      'loading-ring': type === 'ring',
      'loading-ball': type === 'ball',
      'loading-bars': type === 'bars',
      'loading-infinity': type === 'infinity',
      'loading-xs': size === 'xs',
      'loading-sm': size === 'sm',
      'loading-md': size === 'md',
      'loading-lg': size === 'lg',
    }"
  ></span>
</template>

<script>
export default {
  props: {
    // spinner dots ring ball bars infinity
    type: {
      type: String,
      default: "spinner"
    },
    size: {
      type: String,
      default: "lg",
    }
  }
}
</script>
